<template>
	<view>
		<view class="header">
			<view class="num">总共{{ num }}件宝贝</view>
		</view>
		<view class="content">
			<block v-for="(item, index) in productList" :key="index">
				<view class="order">
					<checkbox :checked="item.isselect" @click="changeBox(item)" style="line-height: 120rpx;"></checkbox>
					<image :src="item.imgurl"></image>
					<view class="product-info">
						<view>{{ item.title }}</view>
						<view class="bottom">
							<view class="price">{{ item.currntprice }}</view>
							<view style="display: flex;flex-direction: row;">
								<text @click="reduc(item,index)" :disabled="subState"
									style="width: 45rpx;height: 45rpx;font-size: 28rpx;background-color: #ddd;color: #ffffff;text-align: center;">-</text>
								<!-- <input type="text" v-model="item.goodsnum" style="width: 50rpx;height: 45rpx;" @blur="input(item)"/> -->
								<text>{{item.goodsnum}}</text>
								<text @click="add(item)"
									style="width: 45rpx;height: 45rpx;font-size: 28rpx;background-color: #00c657;color: #ffffff;text-align: center;">+</text>
							</view>
						</view>
					</view>
					<view style="margin-right: 30rpx; margin-left: auto;" @click="deleteOrder(item)">
						<image src="@/static/delete.png" style="width: 45rpx; height: 45rpx;"></image>
					</view>
				</view>
			</block>
		</view>
		<view class="footer">
			<checkbox :checked="allChecked" @click="checkAll" style="padding-left: 50rpx;">全选</checkbox>
			<text>合计：￥{{totalPrice}}</text>
			<view>
				<button type="button" @click="topay" class="button">去结算</button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		Storage
	} from '@/static/libs/utils.js'
	export default {
		data() {
			return {
				num: '',
				goodsnum: 0,
				totalPrice: 0.00,
				subState: true,
				allChecked: true,
				productList: [],
				carts:[],
				keys_arr:[],
				all_keys_arr:[]
			}
		},
		onLoad() {
			this.getCartData()
			this.getProductList()
		},
		methods: {
			//跳转到支付页面
			topay() {
				console.log('123')
				uni.navigateTo({
					url: '../pay/pay?totalPrice=' + this.totalPrice
				})
			},
			//获取购物车商品数量
			getCartData() {
				this.token = Storage.get('token')
				this.$request.post("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&m=lionfish_comshop", {
					controller: 'car.count',
					token: this.token,
					community_id: 1,
					'buy_type': 'dan'
				}).then(res => {
					console.log('购物车商品数量', res)
					this.num = res.data.data
				})
			},
			//获取购物车中的商品
			getProductList() {
				// console.log('初始化2333555',this.productList);
				this.token = Storage.get('token')
				var that = this;
				var arr = [];
				var total_prices = 0;
				this.$request.get("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&&m=lionfish_comshop", {
					controller: 'car.show_cart_goods',
					token: this.token,
					community_id: 1,
					quantity: 1,
					buy_type: 'dan'
				}).then(res => {
					console.log('购物车商品商品',res.data.carts);	
					var productList = res.data.carts;
					that.carts = res.data.carts;
					
					var carts = res.data.carts;
					var keys_arr = []
					var all_keys_arr = []
					
					
					console.log('初始化2333555', this.productList);											
					for (var i in res.data.carts) {
						//提取商户和商品
						for (var s in res.data.carts[i].shopcarts) {
							keys_arr.push(carts[i].shopcarts[s].key)
							all_keys_arr.push(carts[i].shopcarts[s].key+ '_' +carts[i].shopcarts[s].goodsnum)
							console.log("商品keys_arr="+keys_arr,"商品all_keys_arr="+all_keys_arr);
							
							
							console.log(productList[i].shopcarts[s]);																	
							arr = [...arr, productList[i].shopcarts[s]];
							total_prices += ((productList[i].shopcarts[s].currntprice) * parseInt(productList[i]
								.shopcarts[s].goodsnum))
						}
					}
					//console.log(res.data.carts[0].shopcarts[0].title)
					console.log(total_prices);
					that.productList = arr;
					that.totalPrice = total_prices.toFixed(2)
				})
			},
			//删除订单
			deleteOrder(obj) {
				let that = this
				this.token = Storage.get('token')
				console.log('shangping id', obj.id)
				this.$request.get("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&&m=lionfish_comshop", {
					controller: 'car.del_car_goods',
					token: this.token,
					goods_id: obj.id,
					community_id: 1,
					carkey: obj.key,
					quantity: 0
				}).then(res => {
					console.log('删除订单', res)
					uni.showModal({
						title: '提示',
						content: '确认删除商品？',
						success: (res) => {
							if (res.confirm) {
								that.getCartData()
								that.getProductList()
							} else if (res.cancel) {

							}
						}
					})
				})
			},
			//购物车商品减少
			reduc(e,index) {
				this.num--
					var carts = this.carts
			
					var keys_arr = [];
					var all_keys_arr = [];
					var cur_car_key = '';
					
					var item = this.productList[index];
					console.log('每一项商品',item)
					
					cur_car_key = item.key;
					
					//先减去变量库存
					// console.log('carts',carts[0]['shopcarts']);
					// console.log('商品信息',carts[0]['shopcarts'][index]);
					carts[0]['shopcarts'][index]['goodsnum'] = carts[0]['shopcarts'][index]['goodsnum']-1;
					
					carts[0]['shopcarts'][index]['isselect'] = 1
					
			
					// console.log('每一项商品数量',carts[0].shopcarts[index].goodsnum)
				 for (var i in carts) {
					for (var j in carts[0]['shopcarts']) {
						if (carts[0].shopcarts[j].isselect) {
							
							keys_arr.push(carts[0].shopcarts[j].key);
						}
						all_keys_arr.push(carts[0].shopcarts[j].key + '_' + carts[0].shopcarts[j].goodsnum);
						console.log("keys_arr="+keys_arr,"all_keys_arr="+all_keys_arr);
					}
				  }
					this.token = Storage.get('token')
					this.$request.get("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=index&&m=lionfish_comshop",
					{
						controller:'car.checkout_flushall',
						token:this.token,
						car_key:keys_arr.join(','),
						community_id:1,
						all_keys_arr:all_keys_arr.join(','),
						cur_car_key: cur_car_key
					}).
					then(res=>{
						console.log('jianshao',res)
						console.log('每一项商品数量',carts[i].shopcarts[index].goodsnum)
						// this.goodsnum = carts[0].shopcarts[index].goodsnum
						// console.log('每一项商品数量',this.goodsnum)
					})
					this.totalPrice = 0
					
					this.productList.forEach(v => {
						if(v.isselect){
							this.totalPrice += (+v.currntprice) * v.goodsnum
						}
					})
			},
			input(e){
				this.totalPrice = 0
				this.productList.forEach(v => {
					if (v.isselect) {
						this.totalPrice += (+v.currntprice) * v.goodsnum
					}
				})
			},
			//购物车商品增加
			add(e) {	
				e.goodsnum++
				this.token = Storage.get('token')
				this.$request.get("/wxapp.php?from=wxapp&c=entry&a=wxapp&do=user&&m=lionfish_comshop",
				{
					controller:'car.add',
					token:this.token,
					goods_id:e.id,
					community_id:1,
					// quantity:e.goods_start_count,
					//quantity:e.goodsnum,
					quantity:1,
					buy_type:'dan',
					is_just_addcar:1,
					}).then(res=>{
					console.log('gouwuce',res)
					//this.getProductList()
				}),
				this.num++
				this.totalPrice = 0
				this.productList.forEach(v => {
					if (v.isselect) {
						this.totalPrice += (+v.currntprice) * v.goodsnum
					}
				})
			},
			//单选
			changeBox(e) {
				
				this.totalPrice = 0
				if (e.isselect) {
					e.isselect = false
				} else {
					e.isselect = true
				}
				this.allChecked = this.productList.every(v => {
					return v.isselect == true
				})
				this.productList.forEach(v => {
					if (v.isselect) {
						this.totalPrice += (+v.currntprice) * v.goodsnum
					}
				})
			},
			//全选
			checkAll() {
				this.totalPrice = 0
				this.allChecked = !this.allChecked
				this.productList.forEach(v => {
					v.isselect = this.allChecked
					if (v.isselect) {
						this.totalPrice += (+v.currntprice) * v.goodsnum
					}
				})
			},
			changeitem(event, item) {
				console.log(event)
				console.log(item.isselect)
			}
		}
	}
</script>
<style lang="scss">
page {
	background-color: rgb(245, 245, 245);
}
.header {
	width: 100%;
	height: 240rpx;
	background-color: #00C657;
	}
.num {
	margin-left: 30rpx;
	padding-top: 50rpx;
	color: #FFFFFF;
	font-size: 26rpx;
}
.content {
	width: 690rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.02);
	border-radius: 20rpx;
	margin-left: 30rpx;
	margin-bottom: 20%;
	padding-top: 30rpx;
	padding-bottom: 30rpx;
	transform: translateY(-140rpx);//向上平移140rpx
	.order {
		display: flex;
		flex-direction: row;
		padding-left: 20rpx;
		margin: 45rpx 0;
		.order-checkbox {
			height: 120rpx;
			line-height: 120rpx;
		}
		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 10rpx;
		}
		.product-info {
			display: flex;
			flex-direction: column;
			padding-left: 20rpx;
			.bottom {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 40rpx;
				justify-content: space-between;
				width: 316rpx;
			}
		}
	}
}
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #FFFFFF;
	.button {
		background-color: #00c657;
		color: #FFFFFF;
		text-align: center;
		width: 192rpx;
		height: 110rpx;
		line-height: 110rpx;
		border-radius: 0;
	}
}
checkbox .wx-checkbox-input {
	border-color: #D4D4D4;
	border-radius: 50%;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	color: #fff;
	background: #00C657;
}
</style>
